import { useRequest } from 'ahooks';
import { Alert, Button, Form, Input } from 'antd';
import { useTranslation } from 'react-i18next';

import { PrismCode } from '@/components/SourceCode';
import { VulnerableProps } from '@/components/VulnerableTemplate/type';
import rceCode from '@/pages/vulnerable/code/rce';
import messageBox from '@/utils/messageBox';

import { exec } from '../../service';

const codeProps: PrismCode = {
  language: 'tsx',
  code: rceCode.exec,
};

const Vulnerable: React.FC = () => {
  const { t } = useTranslation();
  const [form] = Form.useForm();

  const { run } = useRequest(
    async () => {
      const command = form.getFieldValue('command');
      await exec(command).then(() => {
        messageBox.success({ content: t('exec.success') });
      });
    },
    { manual: true },
  );

  return (
    <>
      <Alert
        className="mb-2 animate__animated animate__shakeY"
        type="info"
        showIcon
        message={t('rce.exec.title')}
      />
      <Form form={form}>
        <Input.Group compact>
          <Form.Item name="command" noStyle>
            <Input style={{ width: 200, marginBottom: 20 }} />
          </Form.Item>
          <Button onClick={run}>exec</Button>
        </Input.Group>
      </Form>
    </>
  );
};

const RcePing: VulnerableProps = {
  vulnerable: <Vulnerable />,
  codeProps,
  causesSolutions: {
    type: 'rce',
    hasCompare: true,
    solutions: 3,
  },
};

export default RcePing;
